<template>
  <el-dialog v-el-drag-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="left"
      label-width="100px"
    >
      <el-form-item label="基地名称" prop="siteName">
        <el-input v-model="temp.siteName" />
      </el-form-item>
      <el-form-item v-if="hidden" label="基地面积" prop="square">
        <el-input-number
          v-model="temp.square"
          controls-position="right"
          class="full-width"
          :min="1"
        />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <v-distpicker
          :province="temp.province"
          :city="temp.city"
          :area="temp.county"
          @selected="onSelected"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="location">
        <el-input
          v-model="temp.location"
          :autosize="{ minRows: 2, maxRows: 4}"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input
          v-model="temp.remarks"
          :autosize="{ minRows: 2, maxRows: 4}"
          type="textarea"
        />
      </el-form-item>
      <el-form-item v-if="hidden" label="所属企业" prop="entId">
        <el-select v-model="temp.entId" placeholder="选择企业" class="full-width">
          <el-option
            v-for="item in entSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="dialogStatus==='add'?addData():modifiedData()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import VDistpicker from 'v-distpicker'
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  name: 'MyDialog',
  directives: { elDragDialog },
  components: { VDistpicker },
  props: {
    dialogStatus: {
      type: String,
      required: true
    },
    temp: {
      type: Object,
      required: true
    },
    dialogFormVisible: {
      type: Boolean,
      required: true
    },
    entSelect: {
      type: Array,
      required: true
    },
    clickDialog: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      textMap: {
        add: '添加基地',
        modify: '修改基地信息'
      },
      rules: {
        siteName: [
          {
            type: 'string',
            required: true,
            message: '请填写企业名称',
            trigger: 'change'
          }
        ],
        square: [
          {
            type: 'number',
            required: true,
            message: '请填写企业面积',
            trigger: 'change'
          }
        ],
        location: [
          {
            type: 'string',
            required: true,
            message: '请填写详细地址',
            trigger: 'change'
          }
        ],
        remarks: [
          {
            type: 'string',
            required: true,
            message: '请填写备注',
            trigger: 'change'
          }
        ],
        entId: [
          {
            type: 'number',
            required: true,
            message: '请选择所属企业',
            trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {
    hidden() {
      return this.dialogStatus === 'add'
    }
  },
  watch: {
    clickDialog() {
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    }
  },
  methods: {
    onSelected(address) {
      this.temp.province = address.province.value
      this.temp.city = address.city.value
      this.temp.county = address.area.value
    },
    addData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$emit('add-data')
        }
      })
    },
    modifiedData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$emit('modify-data')
        }
      })
    }
  }
}
</script>

